<template>
  <div class="topic-add">
    <el-dialog title="更新课题" :visible.sync="dialogVisible" :close-on-click-modal="false" :close-on-press-escape="false">
      <el-form ref="editTopicInfoForm" :model="editTopicInfo" :rules="rules" label-width="80px">
        <el-row class="row" :gutter="20">
          <el-col :span="12">
            <el-form-item label="课题名称" prop="topName">
              <el-input v-model="editTopicInfo.topName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学院" prop="colName">
              <el-input v-model="editTopicInfo.colName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="row" :gutter="20">
          <el-col :span="12">
            <el-form-item label="课题性质" prop="topProperty">
              <el-select v-model="editTopicInfo.topProperty">
                <el-option label="理论研究" value="理论研究"></el-option>
                <el-option label="生产实践" value="生产实践"></el-option>
                <el-option label="科学实验" value="科学实验"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="课题类别" prop="topCategory">
              <el-select v-model="editTopicInfo.topCategory">
                <el-option label="工程设计型" value="工程设计型"></el-option>
                <el-option label="工程技术型" value="工程技术型"></el-option>
                <el-option label="实验研究型" value="实验研究型"></el-option>
                <el-option label="软件开发型" value="软件开发型"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="课题内容" prop="topContent">
          <el-input type="textarea" :rows="10" v-model="editTopicInfo.topContent"></el-input>
        </el-form-item>
        <div class="button-div">
          <el-button class="add-button" type="primary" icon="el-icon-edit" @click="updateTopic('editTopicInfoForm')">更新课题</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'TopicAdd',
  props: {
    visible: Boolean,
    topicInfo: Object
  },
  data () {
    return {
      dialogVisible: false,
      editTopicInfo: {
        topNo: '',
        topName: '',
        colName: '',
        topProperty: '',
        topCategory: '',
        topContent: '',
        topState: ''
      },
      rules: {
        topName: [
          { required: true, message: '课题名称不能为空！', trigger: 'blur' },
          { max: 20, message: '课题名称长度不能超过 20 字符！', trigger: 'blur' }
        ],
        colName: [
          { required: true, message: '学院不能为空！', trigger: 'blur' },
          { max: 30, message: '学院长度不能超过 30 字符!', trigger: 'blur' }
        ],
        topProperty: [
          { required: true, message: '请选择课题性质！', trigger: 'change' }
        ],
        topCategory: [
          { required: true, message: '请选择课题类别！', trigger: 'change' }
        ],
        topContent: [
          { required: true, message: '课题内容不能为空！', trigger: 'blur' },
          { max: 1000, message: '课题内容长度不能超过 1000 字符！', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    visible () {
      this.dialogVisible = this.visible
    },
    dialogVisible () {
      this.$emit('update:visible', this.dialogVisible)
    },
    topicInfo () {
      this.editTopicInfo = this.topicInfo
    },
    editTopicInfo () {
      this.$emit('update:editTopicInfo', this.topicInfo)
    }
  },
  methods: {
    updateTopic (editTopicInfoForm) {
      this.$refs[editTopicInfoForm].validate(
        (valid) => {
          if (valid) {
            this.$axios.put(`/api/topic/${this.editTopicInfo.topNo}`, this.editTopicInfo)
              .then(response => {
                let result = response.data
                if (result.success) {
                  console.log(result.data)
                  this.$message.success('更新成功！')
                  this.dialogVisible = false
                } else {
                  this.$message.error(result.msg)
                }
              })
          }
        })
    }
  }
}
</script>

<style lang="stylus" scoped>
.button-div {
  text-align: right;
}
</style>
